<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/MI-HY.css">
    <link rel="stylesheet" href="css/MI-BOX.css">
    <link rel="stylesheet" href="css/mi.css">
    <link rel="stylesheet" href="css/MI-Ser.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <title>服务</title>
</head>
<body>
    <!-- 头部开始 -->
    <div class="header">
        <div class="container">
            <div class="left-nav">
                <ul>
                    <li><a href="">小米网</a></li>
                    <li><a href="">MIUI</a></li>
                    <li><a href="">米聊</a></li>
                    <li><a href="">游戏</a></li>
                    <li><a href="">多看阅读</a></li>
                    <li><a href="">云服务</a></li>
                    <li><a href="">小米网移动版</a></li>
                    <li><a href="">Select region</a></li>
                </ul>
            </div>
            <div class="login">
                <ul>
                    <li><a href="">登入</a></li>
                    <li><a href="">注册</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <div class="content-container">
        <!-- logo、搜索框开始 -->
        <div class="top">
            <div class="logo">
                <img src="images/logo.png" alt="">
            </div>
            <div class="search">
                <p><img src="images/clock.png">4月14日开放购买</p>
                <br>
                <form>
                    <div>
                        <input type="text" name="" id="" placeholder="搜索您需要的商品">
                        <input class="search-btn" type="submit" value=" ">
                    </div>
                    <a href="">小米手环</a>
                    <a href="">小米音箱</a>
                    <a href="">保护壳</a>
                    <input class="shopping-cart" type="submit" value="购物车">
                </form>
            </div>
        </div>
        <!-- logo、搜索框结束 -->
        <!-- 导航开始 -->
        <div class="nav">
            <div class="drop">
                <a href="">全部商品分类 &or;</a>
                <div class="nav-drop">
                    <ul>
                        <li><a href="">手机 电话卡</a></li>
                        <li><a href="">电视 盒子</a></li>
                        <li><a href="">笔记本 平板</a></li>
                        <li><a href="">家电 插线板</a></li>
                        <li><a href="">出行 穿戴</a></li>
                        <li><a href="">智能 路由器</a></li>
                        <li><a href="">电源 配件</a></li>
                        <li><a href="">个护 儿童</a></li>
                        <li><a href="">耳机 音箱</a></li>
                        <li><a href="">生活 箱包</a></li>
                    </ul>
                </div>
            </div>
            <div class="right-nav">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">小米手机</a></li>
                    <li><a href="">红米</a></li>
                    <li><a href="">小米平板</a></li>
                    <li><a href="">小米电视</a></li>
                    <li><a href="">盒子</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">合约机</a></li>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
        </div>
        <!-- 导航结束 -->
        <!-- 轮播图开始 -->
        <div class="nav-title">
            首页 / 服务支持
        </div>
       
        <div class="carousel">
            <div>
                <img src="images/fuwu-header-1.jpg" alt="">
                <img src="images/Desert.jpg" alt="">
                <img src="images/Lighthouse.jpg" alt="">
                <img src="images/Tulips.jpg" alt="">
            </div>
            <button id="prev"></button>
            <button id="next"></button>
            
        </div>
        <!-- 轮播图结束 -->
        <!-- 商品选择开始 -->
        <div class="title-question">
            您的哪款商品遇到了问题？
        </div>
        <div class="content-list">
            <div>
                <img src="images/goodsList01.jpg">
                <p>小米手机/红米手机</p>
            </div>
            <div>
                <img src="images/goodsList02.jpg">
                <p>小米盒子</p>
            </div>
            <div>
                <img src="images/goodsList03.jpg">
                <p>小米电视</p>
            </div>
            <div>
                <img src="images/goodsList05.jpg">
                <p>其它配件类</p>
            </div>
        </div>

        <!-- 商品选择结束 -->
        <!-- 常见问题开始 -->
        <div class="common-problem">
            <div class="title-question">
                常见问题
            </div> 
            <div class="content-list">
                <div>
                    <div>
                        <img src="images/index_01.jpg" alt="">
                        <p>资源下载</p>
                    </div>
                    
                </div>
                <div>
                    <div>
                        <img src="images/index_02.jpg" alt="">
                        <p>售后服务</p>
                    </div>
                    
                </div>
                <div>
                    <div>
                        <img src="images/index_03.jpg" alt="">
                        <p>账户密码管理</p>
                    </div>
                    
                </div>
                <div>
                    <div>
                        <img src="images/index_04.jpg" alt="">
                        <p>小米VIP认证</p>
                    </div>
                    
                </div>
                <div>
                    <div>
                        <img src="images/index_04.jpg" alt="">
                        <p>预约小米之家面对面服务</p>
                    </div>
                    
                </div>
                <div>
                    <div>
                        <img src="images/index_06.jpg" alt="">
                        <p>查询物流</p>
                    </div>
                    
                </div>
                <div>
                    <div>
                        <img src="images/index_07.jpg" alt="">
                        <p>商品防伪查询</p>
                    </div>
                    
                </div>
                <div class="problem-search">
                    <div>
                        <input type="text" placeholder="请输入您需要提问的问题">
                        <input type="submit" value=" ">
                    </div>
                </div>

            </div>
        </div>
        <!-- 常见问题结束 -->
        <!-- 所需服务开始 -->
        <div class="service-needed">
            <div class="title-question">
                您需要什么样的服务
                <a href="">更多</a>
            </div>
            <div style="padding-bottom:30px;border-bottom:1px solid rgb(224, 224, 224);">
                <ul>
                    <li>
                        热门问题
                        <ul>
                            <li style="color:rgb(255, 74, 0);">5月12日开放购买活动</li>
                            <li>小米手机Note 产品特性综述</li>
                            <li>手机参数对比</li>
                            <li>我购买的东西什么时候发货？</li>
                        </ul>
                    </li>
                    <li>
                        如何在小米网购物
                        <ul>
                            <li>了解购物流程</li>
                            <li>如何在线支付</li>
                            <li>如何参加开放购买</li>
                            <li>如何修改订单信息</li>
                        </ul>
                    </li>
                    <li>
                        快递物流服务
                        <ul>
                            <li>查询物流信息</li>
                            <li>7个工作日内发货保障</li>
                        </ul>
                    </li>
                    <li>
                        实体店面对面服务
                        <ul>
                            <li>预约小米之家门店服务</li>
                            <li>身边的小米之家</li>
                            <li>附近授权维修网点</li>
                            <li>1小时快修服务</li>
                        </ul>
                    </li>
                    <li>
                        售后服务申请
                        <ul>
                            <li>7天无理由退货</li>
                            <li>15天免费换货</li>
                            <li>退换货进度查询</li>
                            <li>领取快递补偿</li>
                            <li>维修进度查询</li>
                        </ul>
                    </li>
                    <li>
                        小米特色服务
                        <ul>
                            <li>建议留言</li>
                            <li>小米云服务</li>
                            <li>小米VIP认证</li>
                            <li>举报假货</li>
                            <li>小米移动电源鉴别宝典</li>
                            <li>小米活塞耳机鉴别宝典</li>
                            <li>小米官方授权经销商</li>
                        </ul>
                    </li>
                </ul>
            </div> 
            <div class="person-image">
                <div>
                    <img src="images/index-customers_01.jpg" alt="">
                    <div class="text">
                        <h3>资讯在线客服</h3>
                        <p>7x24小时为您解决问题</p>
                    </div>
                </div>
                <div>
                    <img src="images/index-customers_02.jpg" alt="">
                    <div class="text">
                        <h3>致电客服专家</h3>
                        <p>400 100 5678每天8:00 21:00</p>
                    </div>
                </div>
                <div>
                    <img src="images/index-customers-03.jpg" alt="">
                    <div class="text">
                        <h3>身边的小米之家</h3>
                        <p>有困难没关系，这里有你的朋友</p>
                    </div>
                </div>
                <div>
                    <img src="images/index-customers_04.jpg" alt="">
                    <div class="text">
                        <h3>官方授权维修网点</h3>
                        <p>520家网点让服务随时在身边</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 所需服务结束 -->
        <!-- 尾部开始 -->
    
    
    
    </div>

    <!-- 尾部开始 -->
    <div class="footer">
        <div class="profit">
            <ul>
                <li>
                    <img src="images/10.png" alt="">
                    <h5>1小时快修服务</h5>
                </li>
                <li>
                    <img src="images/11.png" alt="">
                    <h5>7天无理由退货</h5>
                </li>
                <li>
                    <img src="images/12.png" alt="">
                    <h5>15天免费换货</h5>
                </li>
                <li>
                    <img src="images/13.png" alt="">
                    <h5>man150元包邮</h5>
                </li>
                <li>
                    <img src="images/14.png" alt="">
                    <h5>520余家售后网点</h5>
                </li>
            </ul>
        </div>
        <div class="more">
            <ul>
                <li>
                    <h5>帮助中心</h5>
                    <ul>
                        <li><a href="">购物指南</a></li>
                        <li><a href="">支付方式</a></li>
                        <li><a href="">配送方式</a></li>
                    </ul>
                    
                </li>
                <li>
                    <h5>服务支持</h5>
                    <ul>
                        <li><a href="">售后政策</a></li>
                        <li><a href="">自动服务</a></li>
                        <li><a href="">相关下载</a></li>
                    </ul>
                    
                </li>
                <li>
                    <h5>小米之家</h5>
                    <ul>
                        <li><a href="">小米之家</a></li>
                        <li><a href="">服务网点</a></li>
                        <li><a href="">预约亲临到点服务</a></li>
                    </ul>
                    
                </li>
                <li>
                    <h5>关于小米</h5>
                    <ul>
                        <li><a href="">了解小米</a></li>
                        <li><a href="">加入小米</a></li>
                        <li><a href="">联系我们</a></li>
                    </ul>
                    
                </li>
                <li>
                    <h5>关注我们</h5>
                    <ul>
                        <li><a href="">新浪微博</a></li>
                        <li><a href="">小米部落</a></li>
                        <li><a href="">官方微信</a></li>
                    </ul>
                    
                </li>
                <li>
                    <h4>400-100-5678</h4>
                    <p>周一至周日 8:00-21:00</p>
                    <p>（仅收市话费）</p>
                    <button>24小时在线客服</button>
                </li>
            </ul>
        </div>
        <div class="copyright">
            <div class="container">
                <ul>
                    <li>小米旗下网站：小米网</li>
                    <li>MIUI</li>
                    <li>米聊</li>
                    <li>多看书城</li>
                    <li>小米路由器</li>
                    <li>繁體香港</li>
                    <li>繁體台灣</li>
                    <li>English</li>
                    <li>小米后院</li>
                    <li>小米天猫店</li>
                    <li>小米淘宝直营店</li>
                    <li>小米网盟</li>
                </ul>
                <p>mi.com 京ICP证110507号 京ICP备10046444号 京公网安备1101080212535号 京网文[2014]0009号</p>
                <div>
                    <img src="../MI-HY/images/cnnicVerifyseal.png" alt="">
                    <img src="images/szfwVerifyseal.gif" alt="">
                    <img src="images/save.jpg" alt="">
                    <select name="" id="">
                        <option value="">简体中文</option>
                        <option value="">English</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <!-- 尾部结束 -->
    
</body>
<script>
    $(function(){
        // $("span").click(function(){
        //     $(this).addClass("active").siblings().removeClass("active");
        //     index = $(this).index();
        //     $("#list img").eq(index).fadeIn(300).siblings().fadeOut(0);
        // })
        var index = 0;
        $("#next").click(function(){
            index++;
            if(index>3){
                index = 0;
            }
            animate(index);
        })    
        $("#prev").click(function(){
            index--;
            if(index<0){
                index = 3;
            }
            animate(index);
        })
        function animate(index){
            $(".carousel>div img").eq(index).fadeIn(300).siblings().fadeOut(0);
            // $("span").eq(index).addClass("active").siblings().removeClass("active");
        
        }
        function play(){
            timer = setInterval(function(){
                $("#next").click()
            },2000)
        }
        function stop(){
            clearInterval(timer)
        }
        $(".carousel").mouseover(function(){
            stop();
        })
        $(".carousel").mouseout(function(){
            play();
        })
        play();
    })
</script>
</html>